/*
Copyright 2019 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/

@import '../commons/index.css';

/* override DNA variables to use ones that change in large scale instead of staying static */
:root {
  --spectrum-search-padding-left: var(--spectrum-global-dimension-size-450);
  --spectrum-search-padding-right: var(--spectrum-global-dimension-size-350);
  --spectrum-search-quiet-padding-left: var(--spectrum-global-dimension-size-300);
  --spectrum-search-quiet-padding-right: var(--spectrum-global-dimension-size-350);
}

.spectrum-Search {
  position: relative;
  --spectrum-textfield-border-radius: var(--spectrum-search-border-radius);

  .spectrum-ClearButton {
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    padding: var(--spectrum-search-clear-button-padding);
    background-clip: content-box;

    --spectrum-clearbutton-medium-background-color-hover: var(--spectrum-search-clear-button-background-color-hover);
    --spectrum-clearbutton-medium-background-color-key-focus: var(--spectrum-search-clear-button-background-color-key-focus);
    --spectrum-clearbutton-medium-background-color-down: var(--spectrum-search-clear-button-background-color-down);
  }

  &.is-quiet .spectrum-Search-input {
    padding-inline-end: var(--spectrum-search-quiet-padding-right);
  }

  &.spectrum-Search--invalid .spectrum-ClearButton {
    inset-inline-end: calc(var(--spectrum-icon-alert-medium-width) + var(--spectrum-textfield-padding-x));
  }

  &.spectrum-Search--valid .spectrum-ClearButton {
    inset-inline-end: calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x) / 2 + var(--spectrum-global-dimension-size-150));
  }

  /* Flip clear button and circle loader position so circle loader is to the left of the clear button */
  &.spectrum-Search--loadable .spectrum-ClearButton {
    inset-inline-end: 0
  }

  /* Flip clear button and circle loader position so circle loader is to the left of the clear button */
  &.spectrum-Search--loadable .spectrum-Search-circleLoader {
    inset-inline-end: calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x) / 2 + var(--spectrum-global-dimension-size-150));
  }

  /* Move validation icons so that they sit to the left of the clear button (for async loading combobox tray, same position as loading indicator)  */
  &.spectrum-Search--loadable .spectrum-Search-validationIcon {
    inset-inline-end: calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x) / 2 + var(--spectrum-global-dimension-size-150));
    padding-inline-end: 0;
  }
}

.spectrum-Search-input.spectrum-Search-input {
  display: block;

  /* Correct the odd appearance of input[type="search"] in Chrome and Safari.*/
  /* This gets overridden by .spectrum-Textfield */
  -webkit-appearance: none;

  /* Correct the outline for input[type="search"] style in Safari. */
  outline-offset: -2px;

  text-indent: 0;

  /* Don't let long strings overlap the close icon */
  padding-inline-end: var(--spectrum-search-padding-right);

  /* Remove the inner padding and cancel buttons for input[type="search"] in Chrome and Safari on macOS. */
  &::-webkit-search-cancel-button,
  &::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  .spectrum-Textfield.spectrum-Search--invalid & {
    padding-inline-end: calc(var(--spectrum-search-padding-right) + var(--spectrum-textfield-padding-x) + var(--spectrum-icon-alert-medium-width) + var(--spectrum-textfield-icon-margin-left));
  }

  .spectrum-Textfield.spectrum-Search--valid & {
    padding-inline-end: calc(var(--spectrum-search-padding-right) + var(--spectrum-textfield-padding-x) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left));
  }

  .spectrum-Textfield.spectrum-Search--loadable & {
    padding-inline-end: calc(var(--spectrum-search-padding-right) + var(--spectrum-textfield-padding-x) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left));
  }
}
